<template>
  <div id="index">
    <div id="header">
      <div class="total">
        <span>菜品共计: {{totalNumber}}</span>
      </div>
    </div>
    <div id="section">
      <div class="kindItem" v-for="(item,index) in kinds" :key="index">
        <div style="display: flex;flex-direction: column">
          <span class="name">{{item.m_name}}</span>
          <span class="m_id">{{item.m_id}}</span>
          <span style="color:green;font-size: 0.8rem">库存:{{item.stock}}</span>
          <span style="color:green;font-size: 0.8rem">价格:￥{{item.m_price}}</span>
        </div>
        <img src="/static/store/menu/more.png" alt="" @click="revise(index)">
      </div>
    </div>
    <div id="Revise" :style="{'display':ReviseDisplay}">
      <div class="title">修改菜品</div>
      <div style="margin-top: 1.4rem">
        <span>菜品名称:</span>
        <input type="text" v-model="name">
      </div>
      <div>
        <span>菜品价格:</span>
        <input type="text" v-model="price">
      </div>
      <div>
        <span>菜品库存:</span>
        <input type="text" v-model="number">
      </div>
      <div style="margin-top: 1.3rem">
        <button style="background: #00b900;color: white" @click="submit()">提交</button>
        <button style="background: #c0c0c0;color: white" @click="cancel()">取消</button>
      </div>
    </div>
    <div id="footer">
      <button style="background: #00b100;color: white" @click="addFood()">添加菜品</button>
      <button style="background: #a6a6a6;color: white" @click="deleteFood()">删除品类</button>
    </div>
    <div id="Add" :style="{'display':AddDisplay}">
      <div class="title">新增菜品</div>
      <div style="margin-top: 1.4rem">
        <span>菜品名称:</span>
        <input type="text" v-model="name1">
      </div>
      <div>
        <span>菜品价格:</span>
        <input type="text" v-model="price1">
      </div>
      <div>
        <span>菜品库存:</span>
        <input type="text" v-model="number1">
      </div>
      <div style="margin-top: 1.3rem">
        <button style="background: #00b900;color: white" @click="submit1()">提交</button>
        <button style="background: #c0c0c0;color: white" @click="cancel()">取消</button>
      </div>
    </div>
    <div id="clear" :style="{'display':clearDisplay}">
      <div>
        <span>菜品id</span>
        <input type="text" v-model="id">
      </div>
      <div style="margin-top: 1.3rem">
        <button style="background: #00b900;color: white" @click="submit2()">提交</button>
        <button style="background: #c0c0c0;color: white" @click="cancel()">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        totalNumber: '200',
        name: '',
        price:'',
        number:'',
        name1: '',
        price1:'',
        number1:'',
        id:'',
        kinds:[],
        kindsOption:[
          '热菜类','凉菜类'
        ],
        ReviseDisplay: 'none',
        AddDisplay: 'none',
        clearDisplay: 'none',
        nowItem: {}
      }
    },
    methods:{
      revise(index){
        this.ReviseDisplay = 'auto';
        this.nowItem = this.kinds[index];
      },
      submit(){
        let data={
          "M_id":this.nowItem.m_id,
          "M_name":this.name,
          "class_id":this.nowItem.class_id,
          "M_price":this.price.toString(),
          "picture":this.nowItem.picture,
          "sales_volume":Number(this.nowItem.sales_volume),
          "stock":Number(this.number),
          "S_id":"s001"
        };
        console.log(data);
        this.$axios.post("updateMenu", data).then(res=>{
          console.log(data);
        });
        wx.redirectTo({
          url: '/pages/dishManagement/main?class=' + this.kinds[0].class_id
        })
        this.ReviseDisplay = 'none';
        this.AddDisplay = 'none'; 
      },
      addFood(){
        this.AddDisplay = 'auto'; 
      },
      submit1(){
        let data={
          "M_id":"m" + this.kinds.length + 1,
          "M_name":this.name1,
          "class_id":this.kinds[0].class_id,
          "M_price":this.price1.toString(),
          "picture":1,
          "sales_volume":1,
          "stock":Number(this.number1),
          "S_id":"s001"
        }
        this.$axios.post("insertMenu", data).then(res=>{
          console.log(data);
        });
        wx.redirectTo({
          url: '/pages/dishManagement/main?class=' + this.kinds[0].class_id
        })
        this.ReviseDisplay = 'none';
        this.AddDisplay = 'none';
      },
      deleteFood(){
        this.clearDisplay = 'auto'; 
      },
      submit2(){
        let data={
          "M_id": this.id,
          "S_id": "s001"
        }
        this.$axios.get("deleteMenu", data).then(res=>{
          console.log(data);
        });
        wx.redirectTo({
          url: '/pages/dishManagement/main?class=' + this.kinds[0].class_id
        })
        this.clearDisplay = 'none'; 
      },
      cancel(){
        this.ReviseDisplay = 'none';
        this.AddDisplay = 'none';
        this.clearDisplay = 'none';
      },
      json2Form(json) {
        let str = [];
        for (let p in json) {
          str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
        }
        return str.join("&");
      },
    },
    mounted(){
      let data = {class_id: this.$mp.query.class}
      this.$axios.get("getMenuByClass",data).then(res=>{
        this.kinds = res.data;
        this.totalNumber = this.kinds.length;
        console.log(this.kinds);
      })
    }
  }
</script>

<style scoped>
  #index{
    width: 100%;
    height: 100%;
  }
  #header{
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: row;
  }
  #header .total{
    margin-top: 0.28rem;
    width: max-content;
    margin-left: 0.3rem;
    margin-right: 3.5rem;
    font-size: 0.28rem;
    color: gray;
  }
  #header .add div:nth-child(1){
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0.3rem;
    font-size: 0.3rem;
    border-radius: 50%;
    border: 1px orange solid;
    width: 0.45rem;
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    padding: 0;
  }
  #header .add div:nth-child(2){
    font-size: 0.27rem;
    height: min-content;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0.2rem;
  }
  #section{
    box-shadow: 0 0 3px 3px rgba(136, 136, 136, 0.2);
    overflow: scroll;
    margin-top: 0.3rem;
    margin-left: auto;
    background: white;
    margin-right: auto;
    height: 78%;
    width: 90%;
    display: flex;
    flex-direction: column;
  }
  .kindItem{
    width: 100%;
    height: 1.5rem;
    display: flex;
    flex-direction: row;
    border-bottom: rgba(136, 136, 136, 0.2) solid 2px;
  }
  .kindItem div{
    margin-left: 0.5rem;
    margin-top: auto;
    margin-bottom: auto;
    height: max-content;
    width: max-content;
  }
  .kindItem div span{
    width: max-content;
    height: max-content;
  }
  .kindItem img{
    margin-bottom: auto;
    margin-top: auto;
    margin-left:auto;
    margin-right: 0.2rem;
    width: 0.47rem;
    height: 0.47rem;
  }
  .name{
    color: #2b2b2b;
    font-size: 0.3rem;
    font-weight: bold;

  }
  .m_id{
    color: orange;
    font-size: 0.25rem;
    font-weight: bold;
  }
  #footer{
    margin-top: 0.3rem;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 1rem;
  }
  #footer button{
    border-radius: 7px;
    width: 2.5rem;
    height: 0.9rem;
  }
  #Revise{
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: white;
    height: 5.4rem;
    width: 6rem;
    top: 2.5rem;
    left: 0.78rem;
    box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.7);
    z-index: 2;
  }
  #Revise div{
    font-size: 0.36rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.3rem;
    height: min-content;
    width: 5rem;
    display: flex;
    flex-direction: row;
  }
  #Revise .title{
    font-size: 0.45rem;
    font-weight: bolder;
    padding-bottom: 0.3rem;
    border-bottom: gray 1px solid;
  }
  #Revise div span{
    margin-right: 0.1rem;
  }
  #Revise div input{
    width: 3.2rem;
    border: black solid 1px;
  }
  #Revise div button{
    width: 2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
  }
  #Add{
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: white;
    height: 5.4rem;
    width: 6rem;
    top: 2.5rem;
    left: 0.78rem;
    box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.7);
    z-index: 2;
  }
  #Add div{
    font-size: 0.36rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.3rem;
    height: min-content;
    width: 5rem;
    display: flex;
    flex-direction: row;
  }
  #Add .title{
    font-size: 0.45rem;
    font-weight: bolder;
    padding-bottom: 0.3rem;
    border-bottom: gray 1px solid;
  }
  #Add div span{
    margin-right: 0.1rem;
  }
  #Add div input{
    width: 3.2rem;
    border: black solid 1px;
  }
  #Add div button{
    width: 2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
  }
  #clear{
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: white;
    height: 2.4rem;
    width: 6rem;
    top: 2.5rem;
    left: 0.78rem;
    box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.7);
    z-index: 2;
  }
  #clear div{
    font-size: 0.36rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.3rem;
    height: min-content;
    width: 5rem;
    display: flex;
    flex-direction: row;
  }
  #clear div span{
    margin-right: 0.1rem;
  }
  #clear div input{
    width: 3.2rem;
    border: black solid 1px;
  }
  #clear div button{
    width: 2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
  }
</style>
